<!--
 * @Author: dumin 173672326@qq.com
 * @Date: 2025-03-28 16:56:22
 * @LastEditors: dumin 173672326@qq.com
 * @LastEditTime: 2025-03-29 15:40:16
 * @Description: 会议资料分类
-->
<template>
  <app-page card full>
    <template #header>会议资料</template>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageData.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
          >
            <el-form-item label="主题名称">
              <el-input v-model="pageData.query.categoryName" placeholder="请输入" clearable></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()"> 添加 </el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="categoryName" label="主题名称" />
        <el-table-column label="会议资料">
          <template #default="{ row }">
            <el-link
              type="primary"
              @click="
                $router.push({
                  path: `${base}/meet/file`,
                  query: { categoryId: row.id, id: row.meetId, rootPath: $route.query.rootPath },
                })
              "
              >编辑资料</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="fileCount" label="资料数量" />
        <el-table-column label="开放查看">
          <template #default="{ row }">
            <el-switch
              v-model="row.isOpen"
              :before-change="
                () =>
                  pageActions.handleUpdate(
                    row,
                    { isOpen: !row.isOpen },
                    !row.isOpen ? '确认开放？' : '确认不开放？',
                    '已修改'
                  )
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)">编辑</el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar" v-if="$route.query.id">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template>
  </app-page>

  <jax-dialog-edit
    type="dialog"
    label-width="90px"
    v-model:show="pageData.shwoEdit"
    v-model="pageData.detail"
    :json="formJson"
    @submit="pageActions.handleSubmit()"
    :id-key="pageData.key"
  ></jax-dialog-edit>
</template>

<script setup>
import { usePageList, http } from 'jax-node'
const base = import.meta.env.VITE_APP_BASE

const route = useRoute()
const { pageData, pageActions } = usePageList({
  api: 'meet/file/category',
  query: {
    meetId: route.query.id,
  },
  defaultDetail: {
    meetId: route.query.id,
    isOpen: false,
  },
})

const formJson = computed(() => {
  const required = true
  return [
    { type: 'input', label: '主题名称', name: 'categoryName', required },
    { type: 'switch', label: '是否开放查看', name: 'isOpen', labelWidth: '110' },
  ]
})
</script>

<style lang="scss" scoped></style>
